import { ref, reactive, computed } from "vue";
import { defineStore } from "pinia";

export type Layout = {
  x: number;
  y: number;
  id: string;
  componentName: string;
  width: string;
  height: string;
  props: any;
};

interface LayoutType {
  name: string;
  layout: Array<Layout>;
  configsJson: any;
}
interface StateType {
  layoutList: Array<LayoutType>;
}

export const useLayoutStore = defineStore("layout", {
  state: (): StateType => ({
    layoutList: [],
  }),
  getters: {
    getItem: (state): LayoutType[] => state.layoutList,
  },
  actions: {
    savaLayout(value: any) {
      this.layoutList.push(value);
      return true;
    },
    getLayoutById(name: string) {
      return this.layoutList.find((item) => item.name == name);
    },
  },
  persist: {
    enabled: true,
    strategies: [{ storage: localStorage }],
  },
});
